<template>
  <div style="margin: 50px;" >
    <el-tabs v-model="sysInfo" style="margin-top:15px;">
      <el-tab-pane label="CPU信息" name="cpu">
        <el-table :data="cpuData" border highlight-current-row style="width: max-content">
          <el-table-column prop="attr" label="属性" width="180" align="center"/>
          <el-table-column prop="value" label="值" width="180" align="center"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="内存信息" name="mem">
        <el-table :data="memData" border highlight-current-row style="width: max-content">
          <el-table-column prop="attr" label="属性" width="180" align="center"/>
          <el-table-column prop="value" label="值" width="180" align="center"/>
          <el-table-column prop="memJvm" label="JVM" width="180" align="center"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="JAVA虚拟机信息" name="jvm">
        <el-table :data="jvmData" border highlight-current-row style="width: max-content">
          <el-table-column prop="attr" label="属性" width="180" align="center"/>
          <el-table-column prop="value" label="值" width="180" align="center"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="服务器信息" name="sys">
        <el-table :data="sysData" border highlight-current-row style="width: max-content">
          <el-table-column prop="attr" label="属性" width="180" align="center"/>
          <el-table-column prop="value" label="值" width="180" align="center"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="磁盘信息" name="sysFiles">
        <el-table :data="data.sysFiles" border highlight-current-row style="width: max-content">
          <el-table-column prop="dirName" label="盘符路径" width="180" align="center"/>
          <el-table-column prop="sysTypeName" label="文件系统" width="180" align="center"/>
          <el-table-column prop="typeName" label="盘符类型" width="180" align="center"/>
          <el-table-column prop="total" label="总大小" width="180" align="center"/>
          <el-table-column prop="free" label="可用大小" width="180" align="center"/>
          <el-table-column prop="used" label="已用大小" width="180" align="center"/>
          <el-table-column prop="usage" label="已用百分比(%)" width="180" align="center"/>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
/* eslint-disable */
import {getSysInfo} from '@/api/sysInfo'
import Config from '@/config'
export default {
  data() {
    return {
      sysInfo: 'cpu',
      data:{},
      cpuData:[],
      memData:[],
      jvmData:[],
      sysData:[]
    };
  },
  created() {
    this.getSysInfo();
  },
  methods: {
    getSysInfo(){
      getSysInfo().then(res => {
        this.data=res.data;
        //cpu信息
        this.cpuData=[
          {
            attr:"核心数",
            value:res.data.cpu.cpuNum
          },
          {
            attr:"用户使用率",
            value:res.data.cpu.used+"%"
          },
          {
            attr:"系统使用率",
            value:res.data.cpu.sys+"%"
          },
          {
            attr:"当前空闲率",
            value:res.data.cpu.free+"%"
          },
        ]
        //内存信息
        this.memData=[
          {
            attr:"总内存",
            value:res.data.mem.total+"GB",
            memJvm:res.data.jvm.total+"MB"
          },
          {
            attr:"已用内存",
            value:res.data.mem.used+"GB",
            memJvm:res.data.jvm.used+"MB"
          },
          {
            attr:"剩余内存",
            value:res.data.mem.free+"GB",
            memJvm:res.data.jvm.free+"MB"
          },
          {
            attr:"使用率",
            value:res.data.mem.usage+"%",
            memJvm:res.data.jvm.usage+"%"
          },
        ]
        //java虚拟机信息
        this.jvmData=[
          {
            attr:"Jvm名称",
            value:res.data.jvm.name
          },
          {
            attr:"Java版本",
            value:res.data.jvm.version
          },
          {
            attr:"启动时间",
            value:res.data.jvm.startTime
          },
          {
            attr:"运行时长",
            value:res.data.jvm.runTime
          },
          {
            attr:"安装路径",
            value:res.data.jvm.home
          },
          {
            attr:"项目路径",
            value:res.data.sys.userDir
          },
        ]
        //服务器信息
        this.sysData=[
          {
            attr:"服务器名称",
            value:res.data.sys.computerName
          },
          {
            attr:"操作系统",
            value:res.data.sys.osName
          },
          {
            attr:"服务器IP",
            value:res.data.sys.computerIp
          },
          {
            attr:"系统架构",
            value:res.data.sys.osArch
          },
        ]
      }).catch(err => {
        console.log(err.response.data.message)
      })
    }
  }
};
</script>

<style scoped>

</style>
